<!-- 首页分类内容模块 -->
<template>
  <div class="category-content" v-infinite-scroll="loadMore">
    <div>
      <div class="left">
        <ul>
          <li
            v-for="(item, index) in leftData"
            :key="item.cat_id"
            :class="activeIndex == index ? 'active' : ''"
            @click="changeTab(index, item.cat_id)"
          >
            {{ item.cat_name }}
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="ad-img">
          <img :src="ad_img" alt="" />
        </div>
        <div class="goods" v-for="item in contentData" :key="item.cat_id">
          <div class="title">-{{ item.cat_name }}-</div>
          <div class="flex">
            <div
              class="flex-son shop-box"
              @click="goGoodsList(item)"
              v-for="value in item.child"
              :key="value.cat_id"
            >
              <div>
                <img :src="value.touch_icon" alt="" />
              </div>
              <div>{{ value.cat_name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { categoryDataApi } from "@/api/category";
import { catcontentDataApi } from "@/api/catcontent";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      activeIndex: 0,
      leftData: [],
      leftListId: 858,
      contentData: [],
      lid: [858, 6, 8, 3, 4, 5, 860, 866],
      flag1: false,
      ad_img:
        "https://x.dscmall.cn/storage/data/touch_catads/15630384831872.jpg",
    };
  },                                     
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeTab(index, id) {
      this.activeIndex = index;
      this.leftListId = id;
      this.catcontentData();
      this.leftIndex = index;
      this.ad_img = this.leftData[index].touch_catads;
    },
    goGoodsList(item) {
      this.$router.push(
        "/categorylist/" + item.cat_id + "?title=" + item.cat_name
      );
    },
    categoryListData() {
      categoryDataApi().then((res) => {
        this.leftData = res.data.data;
      });
    },
    catcontentData() {
      catcontentDataApi(this.leftListId).then((res) => {
        this.contentData = res.data.data;
      });
    },
    loadMore() {
      if (window.scrollY >= 877) {
        if (this.leftIndex == 7) {
          this.leftIndex = 0;
        } else {
          this.leftIndex = ++this.leftIndex;
          this.changeTab(this.leftIndex, this.lid[this.leftIndex]);
          window.scrollTo(0, 0);
        }
      } /* else if (window.scrollY = 10) {
        if (this.leftIndex == 0) {
          this.leftIndex = 0;
        }else{
          this.leftIndex = this.leftIndex--;
          this.changeTab(this.leftIndex, this.lid[this.leftIndex]);
          this.catcontentData();
          window.scrollTo(0, 0);
        }
      } */
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.categoryListData();
    this.catcontentData();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.category-content {
  .loading {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    img {
      width: 5rem;
      height: 5rem;
    }
    width: 100%;
    height: 100%;
  }
  display: flex;
  width: 100%;
  height: calc(100% - 4.4rem - 4.9rem);
  position: absolute;
  top: 4.4rem;
  left: 0;
  bottom: 4.9rem;
  right: 0;
  background-color: #fff;
  .left {
    position: fixed;
    top: 4rem;
    left: 0;
    width: 8.5rem;
    height: 100%;
    background-color: #f4f4f4;
    ul {
      li {
        height: 3.8rem;
        line-height: 3.8rem;
        text-align: center;
        font-size: 1.3rem;
        color: #999;
      }
    }
  }
  .active {
    position: relative;
    background-color: #fff;
    color: red !important;
    &::before {
      position: absolute;
      left: 0;
      top: 0.5rem;
      content: "";
      width: 0.2rem;
      height: 3rem;
      background-color: #f23030;
    }
  }
  .right {
    flex: 1;
    margin-left: 9.5rem;
    height: 150rem;
    .ad-img {
      img {
        width: 27rem;
        height: 9rem;
      }
    }
    .goods {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: center;
      text-align: center;
      background-color: #fff;
      .title {
        width: 100%;
        text-align: center;
        margin: 2rem;
        color: #333;
        font-size: 1.3rem;
      }
      .flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: center;
        .shop-box {
          width: 9rem;
          height: 8.2rem;
          text-align: center;
          img {
            width: 5.2rem;
            height: 5.2rem;
          }
        }
      }
    }
  }
}
</style>
